
import { Tabs } from 'antd';
import Lazy from 'components/Lazy';
import { IThreeProps } from 'components/Three';
import Controller from "Controller";
import styles from './index.module.less';
import CapabilityButton from 'components/capability/CapabilityButton';

const items = [
    {
        label: `工具`,
        children: <Lazy factory={() => import('./ui/panels/Toolbox')} />,
    },
    {
        label: `灯光`,
        children: <Lazy factory={() => import('./ui/panels/LightingManagement')} />,
    },
    // {
    //     label: `资源`,
    //     children: <Lazy factory={() => import('./ui/panels/Resource')} />,
    // },
    {
        label: `对象`,
        children: <Lazy factory={() => import('./ui/panels/ModelManagement')} />,
    },
    {
        label: `场景`,
        children: <Lazy factory={() => import('./ui/panels/SceneParameters')} />,
    },
    {
        label: `标签`,
        children: <Lazy factory={() => import('./ui/panels/TagManagement')} />,
    },
    // {
    //     label: `摄像头`,
    //     children: <Lazy factory={() => import('./ui/panels/CameraManagement')} />,
    // },
]

export default function Home() {

    const threeController = Controller.instance.useMemo(s => s.threeController, []);

    return (
        <div className={styles.workbench} >
            <div className={styles.menu} >
                <CapabilityButton capability={require('./capabilitys/newBuild').newBuild} type="text" size="small" />
                <CapabilityButton capability={require('./capabilitys/setUp').setUp} type="text" size="small" />
                <CapabilityButton capability={require('./capabilitys/save').save} type="text" size="small" />
                <CapabilityButton capability={require('./capabilitys/recover').recover} type="text" size="small" />
                <CapabilityButton capability={require('./capabilitys/preview').preview} type="text" size="small" />
            </div>
            <div className={styles.body} >
                <Lazy<IThreeProps> factory={() => import('components/Three')} className={styles.three} controller={threeController} />
                <div className={styles.panel} >
                    <Tabs
                        destroyInactiveTabPane
                        defaultActiveKey="0"
                        tabPosition="right"
                        items={items.map((e, i) => ({ ...e, key: `${i}` }))}
                    />
                </div>
            </div>
            <div className={styles.state} >状态</div>
        </div>
    )
}